<template lang="pug">
  .page.h-100
    .clearfix
      .search-form.mb-10.pl-10.pr-10
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="90")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-if="item.model == 'serverName' || item.model == 'ClaimMode'" v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.label"
                  :key="index"
                ) {{ c_item.label }}
              Select(v-else v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'radio'")
              RadioGroup(type="button" v-model="formData[item.model]")
                Radio.display-inline-block(v-for="c_item of item.radioArr" :label="c_item.value") {{c_item.label}}
            template(v-if="item.type === 'intervalD'")
              DatePicker.pull-left.interval-date(v-model="formData[item.model1]" :placeholder="item.placeholder1" type="date" @on-change="(val, type) => handleChangeDatePicker(val, 'date', item.model1)")
              span.pl-10.pr-10.pull-left.line-h-32 --
              DatePicker.pull-left.interval-date(v-model="formData[item.model2]" :placeholder="item.placeholder2" type="date" @on-change="(val, type) => handleChangeDatePicker(val, 'date', item.model2)")
            template(v-if="item.type === 'intervalMoney'")
              Input.pull-left.w100(v-model="formData[item.model1]" :placeholder="item.placeholder1" clearable)
              span.pl-10.pr-10.pull-left.line-h-32 --
              Input.pull-left.w100(v-model="formData[item.model2]" :placeholder="item.placeholder2" clearable)
            template(v-if="item.type === 'button'")
              Button(type="info" @click="searchFn") 查询

      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button(v-if="hasExport" type="info" @click="handleExport") 导出
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(v-if="hasGetClaimList" type="text" size="small" @click="goClaim(row)") 查看认领
            //- v-if="row.claimMethod != 3"  v-if="row.claimMethod == 3" 
            Button.mr-10(v-if="!row.claimMethod || [1, 2].indexOf(row.claimMethod) != -1" type="text" size="small" @click="goBillClaim(row)" :disabled="row.matchResult == '无差额'") 账单认领
            Button(v-if="!row.claimMethod || row.claimMethod == 3" type="text" size="small" @click="goTreatClaim(row)" :disabled="row.matchResult == '无差额'") 待遇认领
</template>

<script>
import { Common } from '@/utils/common.js'
import { FinanceApi } from '@/api/Finance.api.js'
import { FinanceReceivableApi } from '@/api/FinanceReceivable.api.js'
import { FinanceReceivableClaimApi } from '@/api/FinanceReceivableClaim.api.js'
import { PageListThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'

export default {
  name: 'receivableClaim', // 资金认领页面

  components: {
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasGetReceivableList () {
      return this.actionArr.indexOf('GetReceivableList') > -1
    },
    // 导出
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
    // 查看认领
    hasGetClaimList () {
      return this.actionArr.indexOf('GetClaimList') > -1
    }
  },

  data () {
    return {
      thead: _cloneDeep(PageListThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        accountName: null,
        accountNo: null,
        ClaimMode:null,
        matchRemark: null,
        startAmt: null,
        endAmt: null,
        matchResult: null,
        serverName: null,
        startDate: null,
        endDate: null,
        createStartDate: null,
        createEndDate: null,
      },
      formItem: [
        { type: 'input', label: '对方户名：', placeholder: '请输入对方户名', prop: 'accountName', model: 'accountName', style: 'ivu-col-span-6' },
        { type: 'input', label: '对方账号：', placeholder: '请输入对方账号', prop: 'accountNo', model: 'accountNo', style: 'ivu-col-span-6' },
        { type: 'select', label: '认领方式：', placeholder: '请输入认领方式', prop: 'ClaimMode', model: 'ClaimMode', style: 'ivu-col-span-6', options: 'claimmode' },
        { type: 'input', label: '智能匹配单位：', placeholder: '请输入智能匹配单位', prop: 'matchRemark', model: 'matchRemark', style: 'ivu-col-span-6' },
        { type: 'select', label: '匹配结果：', placeholder: '请输入匹配结果', prop: 'matchResult', model: 'matchResult', style: 'ivu-col-span-6', options: 'matchResultOps' },
        { type: 'select', label: '所属客服：', placeholder: '请选择所属客服', prop: 'serverName', model: 'serverName', style: 'ivu-col-span-6', options: 'server' },
        { type: 'intervalMoney', label: '金额：', placeholder1: '起始金额', prop1: 'startAmt', model1: 'startAmt', placeholder2: '结束金额', prop2: 'endAmt', model2: 'endAmt', style: 'ivu-col-span-6' },
        { type: 'intervalD', label: '到款日期：', placeholder1: '开始日期', prop1: 'startDate', model1: 'startDate', placeholder2: '结束日期', prop2: 'endDate', model2: 'endDate', style: 'ivu-col-span-6' },
        { type: 'intervalD', label: '创建时间：', placeholder1: '开始日期', prop1: 'createStartDate', model1: 'createStartDate', placeholder2: '结束日期', prop2: 'createEndDate', model2: 'createEndDate', style: 'ivu-col-span-6' },
        { type: 'button', style: 'ivu-col-span-6' }
      ],
      arrListDown: {
        server: [],
        claimmode: [],
        matchResultOps: [
          {label: '有差额', value: '有差额'},
          {label: '无差额', value: '无差额'},
          {label: '待认领', value: '待认领'},
        ]
      },
      rules: {}
    }
  },

  mounted () {
    this.servers()
    this.getEnum()
    this.query()
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },

    // 获取客服
    async servers () {
      var params = {
        PageIndex: 1,
        PageSize: 100,
        Args: ''
      }
      Common.servers(params, this.arrListDown, 'server')
      console.log('数据字典：', this.arrListDown)
    },

    // 数据字典
    getEnum () {
      let groupName = 'financereceivable.claimmode'
      Common.getEnum(groupName, this.arrListDown)
    },
 
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      this.selectedId = []
      this.selectedArr = []
      var params = {
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await FinanceReceivableClaimApi.getReceivableList ({...params, ...this.formData})
      console.log('获取列表res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
      }
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return item
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 导出
    async handleExport () {
      FinanceReceivableClaimApi.export({...this.formData, ids: this.selectedId.join(',')}).then(resp => {
        console.log('导出发票申请resp: ', resp)
        if (resp.status == 200 && resp.data.success) {
          console.log('返回链接: ', resp.data.message)
          window.open(resp.data.message, '_blank')
        } else {
          this.$Message.error(resp.data.message)
        }
      })
    },

    // 日期选择
    handleChangeDatePicker (val, type, model) {
      console.log('val: ', val)
      if (val) {
        if (type === 'month') {
          this.formData[model] = this.$moment(val).format('YYYY-MM')
        } else {
          this.formData[model] = this.$moment(val).format('YYYY-MM-DD')
        }
      } else {
        this.formData[model] = ''
      }
    },

    // 去往认领页面
    goClaim (row) {
      this.$router.push({
        path: '/billClaim',
        name: 'billClaim',
        query: {
          fromPage: 'receivableClaimList',
          receiveID: row.id,
          matchGuid: row.matchGuid,
          matchRemark: row.matchRemark,
          amt: row.amt,
          bankName: row.bankName,
          dealTime: this.$moment(row.dealTime).format('YYYY-MM-DD'),
          accountName: row.accountName,
          accountNo: row.accountNo,
          remark: row.remark,
          remain: (row.amt * 1000 - row.matchAmt * 1000) / 1000,
          claimMethod: row.claimMethod
        }
      })
    },

    // 去往账单认领页面
    goBillClaim (row) {
      this.$router.push({
        path: '/billClaim',
        name: 'billClaim',
        query: {
          fromPage: 'receivableClaimList',
          receiveID: row.id,
          matchGuid: row.matchGuid,
          matchRemark: row.matchRemark,
          amt: row.amt,
          bankName: row.bankName,
          dealTime: this.$moment(row.dealTime).format('YYYY-MM-DD'),
          accountName: row.accountName,
          accountNo: row.accountNo,
          remark: row.remark,
          remain: (row.amt * 1000 - row.matchAmt * 1000) / 1000,
        }
      })
    },

    // 去往待遇认领页面
    goTreatClaim (row) {
      console.log(row,'row')
      this.$router.push({
        path: '/treatClaim',
        name: 'treatClaim',
        query: {
          receiveID: row.id,
          matchGuid: row.matchGuid,
          matchRemark: row.matchRemark,
          amt: row.amt,
          bankName: row.bankName,
          dealTime: row.dealTime,
          accountName: row.accountName,
          accountNo: row.accountNo,
          remark: row.remark,
          remain: (row.amt * 1000 - row.matchAmt * 1000) / 1000,
        }
      }).catch(err => {})
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
